<template>
  <div class="subject">
    <div v-for="(item,index) in list" :key="item.id">
    <span>{{ item.shu1 }}</span>
    <span>+</span>
    <span>{{ item.shu2 }}</span>
    <span>=</span>
    <input type="number" v-model="lis[index]" />
    <button :value="index" @click="tj(index)">提交</button>
  </div>
    </div>
</template>

<script>


export default {
data(){
  return{
    inpt:['','','','',''],
      list:[
          {id:1,shu1:Math.floor(Math.random() * 10),shu2:Math.floor(Math.random() * 10)},
          {id:2,shu1:Math.floor(Math.random() * 10),shu2:Math.floor(Math.random() * 10)},
          {id:3,shu1:Math.floor(Math.random() * 10),shu2:Math.floor(Math.random() * 10)},
          {id:4,shu1:Math.floor(Math.random() * 10),shu2:Math.floor(Math.random() * 10)},
          {id:5,shu1:Math.floor(Math.random() * 10),shu2:Math.floor(Math.random() * 10)},
      ],
      lis:['','','','',''],
      ssss:['未完成','未完成','未完成','未完成','未完成']
  }
},
methods:{
  tj(index){
     this.inpt[index]=this.list[index].shu1+this.list[index].shu2
     console.log(this.inpt[index])

     if(this.lis[index]==''){
      this.ssss[index]='未完成'
      
      this.$emit('tj',this.ssss)
   
      return 
     }
     

     if(this.inpt[index]==this.lis[index]){
      this.ssss[index]='正确'
      
      this.$emit('tj',this.ssss)
   
      return 
     }
    
     if(this.inpt[index]!=this.lis[index]){
      this.ssss[index]='错误'
      
      this.$emit('tj',this.ssss)
  
      return 
     }
     
    
  }
},


};
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>